<template>
  <div class="battery-stack-curve">
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="right" class="conditions-form">
      <el-form-item label="日期" prop="month">
        <el-date-picker v-model="ruleForm.month" type="month" placeholder="请选择月份" format="YYYY-MM"
          value-format="YYYY-MM" />
      </el-form-item>
      <el-form-item label="电站" prop="stationId">
        <el-select v-model="ruleForm.stationId" placeholder="请选择电站" clearable>
          <el-option v-for="station in stationOptions" :key="station.value" :label="station.label"
            :value="station.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电表" prop="meterId">
        <el-select v-model="ruleForm.meterId" placeholder="请选择电表" clearable>
          <el-option v-for="meter in meterOptions" :key="meter.value" :label="meter.label"
            :value="meter.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="right" class="conditions-form battery-stack-curve-form">
      <el-form-item label="" prop="alarmType">
        <el-radio-group v-model="ruleForm.type">
          <el-radio-button label="1">对比</el-radio-button>
          <el-radio-button label="2">趋势</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="日期" prop="date">
        <el-date-picker v-model="ruleForm.date" type="date" placeholder="请选择日期" format="YYYY-MM-DD"
          value-format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        <el-button @click="submitForm(ruleFormRef)">
          查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="exportReport">
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <div class="cont">
      <div v-for="(item, index) in singleData" :key="index" class="chartsItem">
        <ECharts :option="getChartOptions(item)" />
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import ECharts from '@/components/ECharts.vue';
const singleData = ref([
  {
    name: '电压/V',
    series: [
      {
        name: '2024-09-05',
        data: [
          { time: '00:00', value: 3.2 },
          { time: '01:20', value: 3.3 },
          { time: '02:40', value: 3.4 },
          { time: '04:00', value: 3.5 },
          { time: '05:20', value: 3.6 }
        ]
      },
      {
        name: '2024-09-06',
        data: [
          { time: '00:00', value: 3.3 },
          { time: '01:20', value: 3.4 },
          { time: '02:40', value: 3.5 },
          { time: '04:00', value: 3.6 },
          { time: '05:20', value: 3.7 }
        ]
      }
    ]
  },
  {
    name: '电流/A',
    series: [
      {
        name: '2024-09-05',
        data: [
          { time: '00:00', value: 1.5 },
          { time: '01:20', value: 1.6 },
          { time: '02:40', value: 1.7 },
          { time: '04:00', value: 1.8 },
          { time: '05:20', value: 1.9 }
        ]
      },
      {
        name: '2024-09-06',
        data: [
          { time: '00:00', value: 1.6 },
          { time: '01:20', value: 1.7 },
          { time: '02:40', value: 1.8 },
          { time: '04:00', value: 1.9 },
          { time: '05:20', value: 2.0 }
        ]
      }
    ]
  }
])

// 根据数据项生成图表选项
const getChartOptions = (item) => {
  // 获取所有时间点（x轴数据）
  const timePoints = Array.from(new Set(
    item.series.flatMap(series => series.data.map(point => point.time))
  )).sort();
  
  // 生成每个系列的数据
  const series = item.series.map(seriesItem => {
    return {
      name: seriesItem.name,
      type: 'line',
      data: seriesItem.data.map(point => point.value),
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        width: 2
      }
    };
  });

  return {
    grid: {
      left: '2%',
      right: '2%',
      top: '15%',
      bottom: '15%'
    },
    legend: {
      data: item.series.map(series => series.name)
    },
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {
        let result = params[0].axisValue + '<br/>';
        params.forEach(param => {
          result += param.seriesName + ': ' + param.value + ' ' + item.name.split('/')[1] + '<br/>';
        });
        return result;
      }
    },
    xAxis: {
      data: timePoints
    },
    yAxis: [
      {
        name: item.name,
      }
    ],
    series: series
  };
};

// 定义表单数据
const ruleFormRef = ref();
const ruleForm = ref({
  stationId: '',
  meterId: '',
  month: '',
  type: '1',
  date: ''
});
// 模拟下拉选项数据
const stationOptions = ref([
  { value: 'station1', label: '电站一' },
  { value: 'station2', label: '电站二' },
  { value: 'station3', label: '电站三' }
]);

const meterOptions = ref([
  { value: 'meter1', label: '电表一' },
  { value: 'meter2', label: '电表二' },
  { value: 'meter3', label: '电表三' }
]);

// 表单提交和重置函数
const submitForm = (formEl: any) => {
  if (!formEl) return;
  formEl.validate((valid: boolean) => {
    if (valid) {
      console.log('查询条件', ruleForm.value);
      // 这里添加查询逻辑
    }
  });
};

const resetForm = (formEl: any) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 导出报告
const exportReport = () => {
  console.log('导出报告', ruleForm.value);
  // 这里添加导出逻辑
};
</script>
<style lang="scss" scoped>
.battery-stack-curve {
  .battery-stack-curve-form{
    margin-top: 0.12rem;
    box-shadow: none !important;
  }
  .cont {
    // padding: 0.12rem 0.16rem;
    margin-top: 0.12rem;

    .chartsItem {
      height: 4.28rem;
      margin-bottom: 0.2rem;
      background: #fff;
      border-radius: 4px;
    }
  }
}
</style>
